<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>基础</span>
			</div>
			<span>
				<el-tooltip
					effect="dark"
					content="绑定实例"
					placement="top"
					popper-class="editor-tips"
				>
					<svg aria-hidden="true" class="svg-icon" >
						<use href="#icon-book"></use>
					</svg>
				</el-tooltip>
			</span>
		</div>
 		<div class="body" v-if="isExpand" style="padding: 0 16px;">
			
			<div class="label">
				<span>分组</span>
			</div>
			<div class="items">
				<el-tree-select
					v-model="classifyId"
					placeholder="请选择分组"
					:data="options"
					:props="defaultProps"
					popper-class="catalogTree" 
					filterable
					check-strictly
					:render-after-expand="false"
					style="width: 100%;"
					@change="onchange"
				/>
			</div>
			
			<div class="label">
				<span>名称</span>
			</div>
			<div class="items">
				<el-input v-model="name" size="small" @change="onchange" />
			</div>
			<div class="label">
				<span>标识</span>
			</div>
			<div class="items">
				<el-input v-model="code" size="small" @change="onchange" />
			</div>
			<div class="label" v-if="!inner">
				<span>可视性</span>
			</div>
			<div class="items" v-if="!inner">
				<el-switch
				    v-model="visible"
				    size="small"
					:active-action-icon="View"
					:inactive-action-icon="Hide"
					@change="onchange"
				  />
			</div>
		</div>	 
	</div>
</template>


<script lang="ts" setup>
	import { Hide, View } from '@element-plus/icons-vue'
	import {
	  getActorClassifyOptions
	} from "@/api/wdp/actor";
	const isExpand=ref(false);
	const props = defineProps({
		sceneId: {
			type: String,
			default: () => ""
		},
		name: {
			type: String,
			default: () => ""
		},
		code: {
				type: String,
				default: () => ""
		},
		classifyId: {
			type: String,
			default: () => ""
		},
		visible:{
			type: Boolean,
			default: () => true
		},
		inner:{
			type: Boolean,
			default: () => true
		}
	})
	
	const defaultProps = {
	  children: 'children',
	  label: 'name',
	  value:'id'
	}
	
	const name=ref<string>("");
	const code=ref<string>("");
	const classifyId=ref<string>("");
	const sceneId=ref<string>("");
	const visible=ref<Boolean>(true);
	const inner=ref<Boolean>(true);
	
	const options = ref<any[]>();
	
	async function loadOptions() {
		if(isExpand.value==false){
			return;	
		}
		getActorClassifyOptions({sceneId:sceneId.value}).then((response) => {
		  options.value =recurOptions(response.data);
		});
	}
	
	function recurOptions(list:any) {
	  function buildTree(node:any) {
	    let children = []
	    for (let item of list) {
	      if (item.parentId === node.id) {
	        children.push(buildTree(item))
	      }
	    }
	    if (children.length > 0) {
	      node.children = children
	    }
	    return node
	  }
	  let res = []
	  for (let item of list) {
	    if (item.parentId === sceneId.value) {
	      res.push(buildTree(item))
	    }
	  }
	  return res
	}
	
	watch(props,() => {
			sceneId.value=props.sceneId
			classifyId.value=props.classifyId
			name.value=props.name
			code.value=props.code
			visible.value=props.visible
			inner.value=props.inner
			loadOptions()
		},
	    { immediate: true, deep: true },
	)

	const handleExpand=()=>{
		isExpand.value=!isExpand.value
		if(isExpand.value==true){
			loadOptions();
		}
	}
	
	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		emits('onchange',{
			type:'base',
			data:{
				name:name.value,
				code:code.value,
				classifyId:classifyId.value,
				visible:visible.value,
			}
		})
	}
	defineExpose({
	});
</script>

<style scoped>
</style>